<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>紫色鹭</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="assets/css/ready.css">
    <link rel="stylesheet" href="assets/css/demo.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/style-zj.css">
</head>
<body>
<div class="wrapper" id="app">
    <div class="main-header">
        <div class="logo-header">
            <a href="index.html" class="logo">
                紫色鹭后台管理
            </a>
            <button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse"
                    data-target="collapse" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <button class="topbar-toggler more"><i class="la la-ellipsis-v"></i></button>
        </div>
        <nav class="navbar navbar-header navbar-expand-lg">
            <div class="container-fluid">
                <ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
                    <li class="nav-item dropdown">
                        <a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false">
                            <img src="assets/img/profile.jpg" alt="user-img" width="36"
                                 class="img-circle"><span id="username"></span></span> </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a class="dropdown-item loginOut" href="#"><i class="fa fa-power-off"></i>退出登录</a>
                        </ul>
                        <!-- /.dropdown-user -->
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="sidebar">
        <div class="scrollbar-inner sidebar-wrapper">
            <ul class="nav">
                <li class="nav-item">
                    <a href="index.html">
                        <i class="la la-dashboard"></i>
                        <p>首页轮播管理</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="user-admin.html">
                        <i class="la la-table"></i>
                        <p>用户管理</p>
                    </a>
                </li>
                <li class="nav-item active">
                    <a href="class.html">
                        <i class="la la-keyboard-o"></i>
                        <p>商品分类管理</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="admin_brand.html">
                        <i class="la la-th"></i>
                        <p>入驻品牌管理</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="store-pass.html">
                        <i class="la la-bell"></i>
                        <p>店铺审核管理</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="brand-pass.html">
                        <i class="la la-bell"></i>
                        <p>品牌审核管理</p>
                    </a>
                </li>
                <!--<li class="nav-item">-->
                <!--<a href="typography.html">-->
                <!--<i class="la la-font"></i>-->
                <!--<p>Typography</p>-->
                <!--</a>-->
                <!--</li>-->
                <!--<li class="nav-item">-->
                <!--<a href="icons.html">-->
                <!--<i class="la la-fonticons"></i>-->
                <!--<p>Icons</p>-->
                <!--</a>-->
                <!--</li>-->
            </ul>

        </div>
    </div>
    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">商品分类管理 <button class="btn btn-primary" @click="toAdd('','','一级')" data-toggle="modal" data-target="#modalUpdate">新增分类</button></div>
                    </div>
                    <div class="card-body">
                        <div class="pro-class">
                            <span>名称</span>
                            <span class="f-r mr-200">操作</span>
                        </div>
                        <div class="list-data" v-for="items in list">
                            <div class="pro-class f-tap">
                                <i class="icon_class01"></i>{{items.name}}
                                <div class="btn_delete fr mr-166" @click.stop="toDel(items.id)">删除</div>
                                <button class="btn_edit fr mr-30" data-toggle="modal" data-target="#modalUpdate" @click="toAdd(items.id,items.name,'二级')">添加</button>
                            </div>
                            <div class="s-box hide" v-for="item in items.subordinate">
                                <div class="pro-class pl-100 s-tap"><i class="icon_class02"></i>{{item.name}}<div class="btn_delete fr mr-166" @click.stop="toDel(item.id)">删除</div><div class="btn_edit fr mr-30" @click="toAdd(item.id,item.name,'三级')" data-toggle="modal" data-target="#modalUpdate">添加</div> </div>
                                <div class="box_03 hide">
                                    <div class="t-box pro-class pl-200" v-for="it in item.subordinate"><i class="icon_class03"></i>{{it.name}} <div class="btn_delete fr mr-166" @click.stop="toDel(it.id)">删除</div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalUpdate" tabindex="-1" role="dialog" aria-labelledby="modalUpdatePro" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h6 class="modal-title">新增</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <table class="table table-head-bg-success">
                        <tr>
                            <td>当前添加的分类等级为</td>
                            <td><span style="color: #318FF3">{{parentLevel}}</span></td>
                        </tr>
                        <tr v-if="parentsId">
                            <td>父级分类</td>
                            <td>{{parentName}}</td>
                        </tr>
                        <tr>
                            <td>分类名称</td>
                            <td><input type="text" id="link" class="form-control input-square" v-model="name"></td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary sure" data-dismiss="modal"  @click="toCommit">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
</body>
<script src="assets/js/core/jquery.3.2.1.min.js"></script>
<script src="assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/jquery.mapael.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/maps/world_countries.min.js"></script>
<script src="assets/js/plugin/chart-circle/circles.min.js"></script>
<script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="js/config.js"></script>
<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            parentsId:'',
            parentName:'',
            list:'',
            name:'',
            id:'',
            parentLevel:''
        },
        beforeCreate: function () {
            getList();
        },
        methods:{
            toAdd:function (id,name,parentLevel) {
                this.parentLevel = parentLevel;
                this.parentsId = id;
                this.parentName = name;
                $(".add_model").show();
                $(".main").hide();
            },
            toCommit:function () {
                if(!this.name){alert("请填写分类名称！");return}
                get_ajax("/sys/storeCommodityType/saveStoreCommodityTypeInfo",{name:this.name,pid:this.parentsId},function (data) {
                    get_confirm("新增成功！",function () {
                        location.reload()
                    })
                })
            },
            toDel:function (id) {
                this.id = id;
                get_confirm("确认删除该分类？",function () {
                    get_ajax("/sys/storeCommodityType/delById",{id:app.id},function (data) {
                        layer.msg("删除成功！");
                        getList()
                    })
                })
            }
        }

    });

    function getList() {
        get_ajax("/sys/storeCommodityType/getAllList",{},function (data) {
            app.list = data;
            console.log(data)
        })
    }

    $('body').on('click','.f-tap',function(){
        $(this).parents(".list-data").siblings().find(".s-box,.box_03").slideUp();
        $(this).siblings(".s-box").slideToggle();
    })
    $('body').on('click','.s-tap',function(){
        $(this).parents(".s-box").siblings().find(".box_03").slideUp();
        $(this).siblings(".box_03").slideToggle();
    })

</script>
</html>